<style scoped lang="stylus">
</style>

<template>
    <div>
        <el-upload
            style="width: 360px"
            drag
            action=""
            :file-list="uploadQueue"
            :auto-upload="false"
            :on-preview="handlePreview"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="MAX_UPLOAD_HISTORY_COUNT"
            :on-exceed="handleExceed"
            accept=".zip, rar, .txt, .doc, .docx, .xls, .xlsx, .pdf">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或点击<em>添加</em>其他文件</div>
            <div slot="tip" class="el-upload__tip">
                <ul>
                    <li>单个文件长度请勿超过{{MAX_SINGLE_FILE_SIZE}}，单次最多可上传{{MAX_UPLOAD_HISTORY_COUNT}}个文件。</li>
                    <li>上传文件只能是下列类型：
                        zip/rar/txt/doc/docx/xls/xlsx/pdf。</li>
                </ul>
            </div>

        </el-upload>
        <div style="text-align:left;margin-top:10px">
            <el-button :disabled="uploadQueue.length===0" size="small" type="normal" @click="resetUploadQueue">清空待上传队列</el-button>
            <el-button :disabled="!isQueueReadyToUpload" size="small" type="primary" @click="submitUploadFiles">全部开始上传</el-button>
        </div>
        <hr>
        <file-index ref="childWidget"/>
    </div>
</template>

<script>
import FileIndex from "@/components/FileIndex/FileIndex.vue";

export default {
    name: "FileUploadDemo.vue",
    components: {
        FileIndex,
    },
    computed: {
        isQueueReadyToUpload: function() {
            let ready = this.uploadQueue.length >= 1 && !this.uploading
            console.log(`===51=== ready=${ready} uploading=${this.uploading}`)
            return ready
        }
    },
    data() {
        return {
            MAX_SINGLE_FILE_SIZE: "16MB",
            MAX_UPLOAD_HISTORY_COUNT: 10,
            uploading: false,
            uploadQueue: [
            ],
        };
    },
    methods: {
        handlePreview(file) {
        },
        handleExceed(selectedFiles, fileList) {
            this.$confirm(`抱歉！限制单次最多可以上传${this.MAX_UPLOAD_HISTORY_COUNT}个文件, 不允许同时上传${selectedFiles.length + fileList.length}个文件`,{
                confirmButtonText: '知道了',
                showCancelButton: false,
                showClose: false,
            })
            this.$message.warning(`限制单次最多可以上传${this.MAX_UPLOAD_HISTORY_COUNT}个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleChange(file, fileList) {
            this.uploadQueue = fileList;
        },
        handleRemove(file, fileList) {
            this.uploadQueue = fileList;
        },
        submitUploadFiles() {
            if (this.uploadQueue.length <= 0) {
                this.$message.error("请选择文件");
                return false;
            }
            let formData = new FormData();
            this.uploadQueue.forEach(file => {
                formData.append("fileList", file.raw);
            });
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            }
            const ServerImplemented = true
            if (!ServerImplemented) {
                // 项目前期服务器尚未准备好，界面
                this.$confirm("出错啦！服务器忙，超时无响应，前后端联调中……",{
                    confirmButtonText: '知道了',
                    showCancelButton: false,
                    showClose: false,
                })
            } else {
                this.uploading = true
                let _this = this
                axios.post("/files", formData, config).then(res=>{
                    _this.uploading = false
                    let data = res.data
                    if (res.status >= 200 && res.status <= 201) {
                        this.$message.success('文件全部上传完毕！')
                        _this.resetUploadQueue()
                        this.$refs.childWidget.reload()
                        // resolve(true)
                    } else {
                        this.$message.error(`文件上传失败！错误码：${res.status}`)
                        // reject(res)
                    }
                }).catch(err => {
                    _this.uploading = false
                    this.$confirm("出错啦！连不上后台服务器啦！", {
                        confirmButtonText: '关闭',
                        showCancelButton: false,
                        showClose: false,
                    })
                    // reject(err)
                })
            }
        },
        resetUploadQueue(){
            //console.log("正在清空上传队列...")
            this.uploadQueue = [];
        },
    }
}
</script>
